<div class="main-content" ng-controller="ListAndOneDetailCtrl">
	<div class="breadcrumbs" id="breadcrumbs">
		<ul class="breadcrumb">
			<li>
				<i class="icon-home home-icon"></i>
				<a href="#">Home</a>
			</li>

			<li>
				<a href="#">Tables</a>
			</li>
			<li class="active">Simple &amp; Dynamic</li>
		</ul><!-- .breadcrumb -->

		<div class="nav-search" id="nav-search">
			<form class="form-search">
				<span class="input-icon">
					<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off">
					<i class="icon-search nav-search-icon"></i>
				</span>
			</form>
		</div><!-- #nav-search -->
	</div><!-- /breadcrumbs -->

	<div class="page-content">
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter blue">显示与格式化数据</h3>

				<!-- 查询功能 -->
				<form class="form-search">
					<div class="row">
						<div class="col-xs-12 col-sm-8">
							<div class="input-group">
								<input type="text" class="form-control search-query" placeholder="Type your query" ng-model="criteria">
								<span class="input-group-btn">
									<button type="button" class="btn btn-purple btn-sm">
										Search
										<i class="icon-search icon-on-right bigger-110"></i>
									</button>
								</span>
							</div>
						</div>
					</div>
				</form> <!-- /查询功能 -->
				<br>

				<div class="table-header"> Results for "Latest Registered Domains" </div>

				<div id="sample-table-2_wrapper" class="dataTables_wrapper" role="grid">
					<table id="sample-table-1" class="table table-striped table-bordered table-hover dataTable">
						<thead>
							<tr>
								<th class="center">
									<label>
										<input type="checkbox" class="ace">
										<span class="lbl"></span>
									</label>
								</th>
								<th ng-click="sort('name')">
									Name
									<i ng-class="{'icon-arrow-up' : isSortUp('name'), 'icon-arrow-down' : isSortDown('name')}"></i>
								</th>
								<th>e-mail</th>
								<th class="hidden-480">Clicks</th>

								<th>
									<i class="icon-time bigger-110 hidden-480"></i>
									Update
								</th>
								<th class="hidden-480">Status</th>

								<th></th>
							</tr>
						</thead>

						<tr ng-repeat="user in usersFilter = (users | filter:criteria | pagination:pageNo:pageSize | orderBy:sortField:reverse)" ng-click="toggleSelected()" ng-switch on="isSelected()" >
								<td class="center">
									<label>
										<input type="checkbox" class="ace">
										<span class="lbl"></span>
									</label>
								</td>

								<td> <a href="javascript:;">{{user.name}}</a> </td>
								<td>{{user.email}}</td>
								<td class="hidden-480">3,330</td>
								<td>Feb 12</td>

								<td class="hidden-480">
									<span class="label label-sm label-warning">{{user.done}}</span>
								</td>

								<td>
									<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
										<button class="btn btn-xs btn-success" ng-click="hello(user)">
											<i class="icon-ok bigger-120"></i>
										</button>

										<button class="btn btn-xs btn-info">
											<i class="icon-edit bigger-120"></i>
										</button>

										<button class="btn btn-xs btn-danger">
											<i class="icon-trash bigger-120"></i>
										</button>

										<button class="btn btn-xs btn-warning">
											<i class="icon-flag bigger-120"></i>
										</button>
									</div>

									<div class="hidden-md hidden-lg" ng-switch-when="true">
										<div class="inline position-relative">
											<button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
												<i class="icon-cog icon-only bigger-110"></i>
											</button>

											<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
												<li>
													<a href="#" class="tooltip-info" data-rel="tooltip" title="" data-original-title="View">
														<span class="blue">
															<i class="icon-zoom-in bigger-120"></i>
														</span>
													</a>
												</li>

												<li>
													<a href="#" class="tooltip-success" data-rel="tooltip" title="" data-original-title="Edit">
														<span class="green">
															<i class="icon-edit bigger-120"></i>
														</span>
													</a>
												</li>

												<li>
													<a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
														<span class="red">
															<i class="icon-trash bigger-120"></i>
														</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</td>
							</tr>

					</table>

					<div class="row">

						<div class="col-sm-6">
							<div class="dataTables_info" id="sample-table-2_info">Showing 1 to 10 of {{usersFilter.length}} entries</div>
						</div><!-- /col-sm-6 -->

						<div class="col-sm-6">
							<div class="dataTables_paginate paging_bootstrap">
								<ul class="pagination">
									<li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>

									<li class="active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>

									<li class="next"><a href="#"><i class="icon-double-angle-right"></i></a></li>
								</ul>
							</div>
						</div><!-- /col-sm-6 -->
					</div><!-- /row -->
				</div><!-- /dataTables_wrapper -->

			</div><!-- col-xs-12 -->
		</div><!-- row -->
	</div><!-- /page-content -->
</div>
